<template>
    <el-form class="dynamic" ref="form" :model="form" label-width="80px">
        <el-form-item label="题目" prop="question" :error="errors.question">
            <el-input v-model="form.question" clearable></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="description" :error="errors.description">
            <quill-editor v-model="form.description"
                          :options="editorOption"
                          ref="quillEditor">
            </quill-editor>
        </el-form-item>

        <el-form-item label="类型" :error="errors.type">
            <el-tabs v-model="workTypeTab">
                <el-tab-pane label="单选题" name="single">

                    <el-form-item
                            v-for="(selection, index) in form.data_by_type.single.selections"
                            :label="'选项' + (index+1)"
                            :key="selection.key"
                            :prop="'data_by_type.single.selections.' + index + '.value'"
                            :rules="{
      required: true, message: '选项不能为空', trigger: 'blur'
    }"
                    >
                        <el-input v-model="selection.value"></el-input>
                        <el-radio v-model="form.data_by_type.single.correct_selection" :label="index">正确选项</el-radio>
                        <el-button @click.prevent="removeSingleSelection(selection)">删除</el-button>
                    </el-form-item>
                    <el-button @click="addSingleSelection">新增选项</el-button>

                </el-tab-pane>
                <el-tab-pane label="多选题" name="multiple">
                    <el-form-item
                            v-for="(selection, index) in form.data_by_type.multiple.selections"
                            :label="'选项' + (index+1)"
                            :key="selection.key"
                            :prop="'data_by_type.multiple.selections.' + index + '.value'"
                            :rules="{
      required: true, message: '选项不能为空', trigger: 'blur'
    }"
                    >
                        <el-input v-model="selection.value"></el-input>
                        <el-checkbox v-model="form.data_by_type.multiple.correct_selections" :label="index">正确选项
                        </el-checkbox>
                        <el-button @click.prevent="removeMultipleSelection(selection)">删除</el-button>
                    </el-form-item>
                    <el-button @click="addMultipleSelection">新增选项</el-button>

                </el-tab-pane>
                <el-tab-pane label="提交作品题" name="upload">
                    您已选择类型为提交作品
                </el-tab-pane>
            </el-tabs>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    const type = {single: 1, multiple: 2, upload: 3};
    export default {
        props: {workId: Number, errors: Object}, data() {
            return {
                form: {
                    question: '',
                    description: null,
                    data_by_type: {
                        single: {
                            correct_selection: null,
                            selections: [{
                                value: ''
                            }]
                        },
                        multiple: {
                            correct_selections: [],
                            selections: [{
                                value: ''
                            }]
                        },
                        upload: null,
                    }
                },

                workTypeTab: 'single',
                editorOption: {
                    modules: {
                        toolbar: [
                            [{'size': ['small', false, 'large']}],
                            ['bold', 'italic'],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            ['link', 'image']
                        ],
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        },
                        imageDrop: true,
                    }
                }
            }
        }, computed: {
            workData() {
                if (this.workTypeTab === 'single') {
                    return this.form.data_by_type.single;
                } else if (this.workTypeTab === 'multiple') {
                    return this.form.data_by_type.multiple;
                } else {
                    return {}
                }
            }, workType() {

                return type[this.workTypeTab];
            }
        }, methods: {
            onSubmit() {
                let form = {
                    question: this.form.question,
                    description: this.form.description,
                    data: this.workData,
                    type: this.workType
                };
                // console.log(form);

                this.$emit('complete', form);
            }, getWork() {
                axios.get('works/' + this.workId).then((response) => {
                    let typei = _.invert(type);
                    let t = typei[response.data.type];
                    console.log(typei);
                    this.form.question = response.data.question;
                    this.form.description = response.data.description;

                    this.form.data_by_type[t] = response.data.data;
                    this.workTypeTab = t;
                })
            }, removeSingleSelection(item) {
                var index = this.form.data_by_type.single.selections.indexOf(item)
                if (index !== -1) {
                    this.form.data_by_type.single.selections.splice(index, 1)
                }
            }, addSingleSelection() {
                this.form.data_by_type.single.selections.push({
                    value: '',
                });
            }, removeMultipleSelection(item) {
                var index = this.form.data_by_type.multiple.selections.indexOf(item)
                if (index !== -1) {
                    this.form.data_by_type.multiple.selections.splice(index, 1)
                }
            }, addMultipleSelection() {
                this.form.data_by_type.multiple.selections.push({
                    value: '',
                });
            }
        }, watch: {
            workId() {
                this.getWork();
            }
        }, created() {
            if (this.workId) {
                this.getWork();
            }
        }
    }
</script>

<style scoped>
    .dynamic .el-input {
        margin-right: 10px;
        width: 270px;
        vertical-align: top
    }
</style>